<template>
  <div v-loading.fullscreen.lock="loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input size="mini" placeholder="标签名称" v-model="getListData.fuzzyInfo"></el-input>
        </el-col>
        <el-col :span="3">
            <el-select v-model="getListData.status" size="mini" clearable  placeholder="状态">
              <el-option
                v-for="item in searhFormData.stateOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-button-group>
              <el-button size="mini"  @click="search">查询</el-button>
              <el-button size="mini"  @click="showAdd" type="primary">新增</el-button>
            </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div class="list">
          <el-table stripe :data="dataSource" >
            <el-table-column prop="id" label="ID" ></el-table-column>
            <el-table-column prop="name" label="标签名称" ></el-table-column>
            <el-table-column prop="descibe" label="标签介绍" ></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <div>
                  {{scope.row.status|status}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
              <el-button-group>
                <el-button  type="default" icon="el-icon-edit"  @click="showUpdate(scope.row)" size="mini">编辑</el-button>
                <el-button  type="default" icon="el-icon-delete"  @click="updateStatus(scope.row,1)"  size="mini" v-if="scope.row.status==0">禁用</el-button>
                <el-button  type="default" icon="el-icon-delete"  @click="updateStatus(scope.row,0)"  size="mini" v-if="scope.row.status==1">启用</el-button>
              </el-button-group>
              </template>
            </el-table-column>
          </el-table>
    </div>
    <el-dialog title="添加标签"
      :visible.sync="dialog.addBox"
      width="400px"
      @close="closeAddRules('addRules')"
      :close-on-click-modal="false">
        <el-form :model="addForm" status-icon  :rules="rules" ref="addRules">
          <el-form-item label="标签名称" label-width="80px" prop="name">
            <el-input size="mini" v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="标签介绍" label-width="80px" prop="descibe">
            <el-input size="mini"
              type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                v-model="addForm.descibe">
              </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleAdd()"  size="mini">取 消</el-button>
          <el-button type="primary" @click="add('addRules')"  size="mini">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改标签"
        :visible.sync="dialog.updateBox"
        width="400px"
        @close="closeAddRules('updateRules')"
        :close-on-click-modal="false">
          <el-form :model="updateForm" status-icon  :rules="rules" ref="updateRules">
            <el-form-item label="标签名称" label-width="80px" prop="name">
              <el-input size="mini" v-model="updateForm.name"></el-input>
            </el-form-item>
            <el-form-item label="标签介绍" label-width="80px" prop="descibe">
              <el-input size="mini"
                type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  v-model="updateForm.descibe">
                </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancleUpdate()"  size="mini">取 消</el-button>
            <el-button type="primary" @click="update('updateRules')"  size="mini">确 定</el-button>
          </div>
        </el-dialog> 
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paginationData.currentPage"
          :background="true"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationData.total">
        </el-pagination>     
  </div>
</template>

<script>
import labelController from '@/api/labelController/index'
  export default {
    name:'label',
    data(){
      return {
        searhFormData:{
          stateOptions:[
            {id:0,text:'启用'},
            {id:1,text:'禁用'}
          ]
        },
        loading:false,
        getListData:{
          fuzzyInfo:null,
          status:null,
          pageSize:10,
          pageNum:1
        },
        paginationData:{
          currentPage:1,
          pageSizes:[10,20,30],
          pageSize:10,
          total:0
        },
        dataSource:[
          {
            "id":1,
            "name":"男生",
            "info":"适合男生",
            "stateName":"启用",
            "state":0
          },
          {
            "id":2,
            "name":"女生",
            "info":"适合女生",
            "stateName":"启用",
            "state":0
          },
          {
            "id":3,
            "name":"个性化",
            "info":"适合杀马特",
            "stateName":"禁用",
            "state":1
          },
        ],
        addForm:{
          name:null,
          descibe:null,
          status:0
        },
         updateForm:{
          id:null,
          name:null,
          descibe:null
        },
        rules:{
          name:[
            {required:true,message:'请输入标签名',trigger:'blur'}
          ],
          descibe:[
            {required:true,message:'请输入描述',trigger:'blur'}
          ],
        },
        dialog:{
          addBox:false,
          updateBox:false
        }
      }
    },
    filters:{
      status:function(value){
        var res = value==0?'启用':'禁用';
        return res;
      }
    },
    created(){
      this.getList();
    },
    methods:{
      search(){
        this.getList();
      },
      showAdd(){
        this.dialog.addBox = true;
      },
      getList(){
        var formData =  this.getListData;
        this.loading = true;
        labelController.getList(formData).then(response=>{
          this.paginationData.total=response.data.total;
          this.dataSource = response.data.list;
          this.loading = false;
        })
      },
      closeAddRules(rulesForm){
        this.$refs[rulesForm].resetFields();
      },
      cancleAdd(){
        this.dialog.addBox = false;
      },
      add(rulesForm){
        this.$refs[rulesForm].validate((valid) => {
          if(valid){
            this.loading = true;
            labelController.add(this.addForm).then(response=>{
                
                if(response.success){
                  this.getList();
                  this.$message({
                    type: 'success',
                    message: response.msg
                  });
                }
                this.dialog.addBox = false;
                this.loading = false;
              }).catch(()=>{
                this.loading = false;
              })            
        }})
      },
      updateStatus(data,status){
        let fromData = {
          id:data.id,
          status:status
        }
        let msg = status==0?'此操作会启用该频道，是否继续？':'此操作会禁用该频道，是否继续？';
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          labelController.updateStatus(fromData).then(response=>{
            if(response.success){
              this.getList();
              this.$message({
                type: 'success',
                message: response.msg
              });
            }
          })
        })
      },  
      showUpdate(data){
        this.updateForm = {
          id:data.id,
          name:data.name,
          descibe:data.descibe
        }
       this.dialog.updateBox = true;
      },
      cancleUpdate(){
        this.dialog.updateBox = false;
      },
      update(rulesForm){
        this.$refs[rulesForm].validate((valid) => {
          if(valid){
             this.loading = true;
            labelController.update(this.updateForm).then(response=>{
               this.loading = false;
               if(response.success){
                 this.dialog.updateBox = false;
                 this.getList();
               }
            }).catch(()=>{
              this.loading = false;
            })
          }
        })
         
      },
      handleSizeChange(val) { // 修改每页显示条数 需要发送请求
        this.paginationData.pageSize=val;
        this.getListData.pageSize=val;
        this.getList();//重新获取当前页数据
      },
      handleCurrentChange(val) { // 修改当前页 需要发送请求
        this.paginationData.currentPage=val;
        this.getListData.pageNum=val;
        this.getList();//重新获取当前页数据
      }          
    }
  }
</script>

<style scoped>
.header{
  margin-top: 20px;
}
.list{
  margin-top: 20px;
}
</style>
